<template>
  <div>
    <div v-if="showbutton"><el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">学校名称</td>
          <td colspan="4"><input type="text" v-model="dataform.orgName" /></td>
          <td colspan="2">法人代表(校长)</td>
          <td colspan="2">
            <input type="text" v-model="dataform.legalPerson" />
          </td>
        </tr>
        <tr>
          <td colspan="1">网站地址(选填)</td>
          <td colspan="4">
            <input type="text" v-model="dataform.intAddress" />
          </td>
          <td colspan="2">固定电话</td>
          <td colspan="2">
            <input type="text" v-model="dataform.staticPhone" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">学校类别(划“√”)</td>
          <td colspan="2">小学</td>
          <td colspan="2">初中</td>
          <td colspan="2">高中</td>
          <td colspan="2">中专/职高/技校</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="SchoolCategory.PrimarySchool" />
          </td>
          <td colspan="2">
            <input type="text" v-model="SchoolCategory.JuniorHighSchool" />
          </td>
          <td colspan="2">
            <input type="text" v-model="SchoolCategory.SeniorHighSchool" />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="SchoolCategory.ProfessionalHighSchool"
            />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">开展足球阶段(划“√”)</td>
          <td colspan="2">小学</td>
          <td colspan="2">初中</td>
          <td colspan="2">高中</td>
          <td colspan="2">中专/职高/技校</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="PlayFootball.PrimarySchool" />
          </td>
          <td colspan="2">
            <input type="text" v-model="PlayFootball.JuniorHighSchool" />
          </td>
          <td colspan="2">
            <input type="text" v-model="PlayFootball.SeniorHighSchool" />
          </td>
          <td colspan="2">
            <input type="text" v-model="PlayFootball.ProfessionalHighSchool" />
          </td>
        </tr>
        <tr>
          <td colspan="1">在校学生人数</td>
          <td colspan="4">
            <input type="text" v-model="dataform.onSchoolStudentNum" />
          </td>
          <td colspan="2" rowspan="2">校足球代表队队员人数</td>
          <td colspan="1">男</td>
          <td colspan="1">
            <input type="text" v-model="dataform.footballManNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1">参加足球运动学生人数</td>
          <td colspan="4">
            <input type="text" v-model="dataform.joinFootballNum" />
          </td>
          <td colspan="1">女</td>
          <td colspan="1">
            <input type="text" v-model="dataform.footballWomanNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">所获级别命名授予时间(年份)</td>
          <td colspan="4">国家级定点体校</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getNationYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">省级定点体校</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getProvinceYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">地市级定点体校</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getCityYear" />
          </td>
        </tr>
        <tr>
          <td colspan="4">县级定点体校</td>
          <td colspan="4">
            <input type="text" v-model="dataform.getCountyYear" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="7">足球场地</td>
          <td colspan="2" rowspan="2">类型/名称</td>
          <td colspan="2" rowspan="2">数量(个)</td>
          <td colspan="1" rowspan="2">面积(平方米)</td>
          <td colspan="3">场地质量规划(划 "√")</td>
        </tr>
        <tr>
          <td colspan="1">草皮</td>
          <td colspan="1">塑胶</td>
          <td colspan="1">其他</td>
        </tr>
        <tr>
          <td colspan="2">11人标准场地</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet8bList[0].num" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[0].acreage" />
          </td>

          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[0].type" />
          </td>
          <td colspan=" 1">
            <input type="text" v-model="dataform.fSheet8bList[0].type2" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[0].type3" />
          </td>
        </tr>
        <tr>
          <td colspan="2">7人制场地</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet8bList[1].num" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[1].acreage" />
          </td>

          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[1].type" />
          </td>
          <td colspan=" 1">
            <input type="text" v-model="dataform.fSheet8bList[1].type2" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[1].type3" />
          </td>
        </tr>
        <tr>
          <td colspan="2">5人制场地</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet8bList[2].num" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[2].acreage" />
          </td>

          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[2].type" />
          </td>
          <td colspan=" 1">
            <input type="text" v-model="dataform.fSheet8bList[2].type2" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[2].type3" />
          </td>
        </tr>
        <tr>
          <td colspan="2">室内5人制场地</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet8bList[3].num" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[3].acreage" />
          </td>

          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[3].type" />
          </td>
          <td colspan=" 1">
            <input type="text" v-model="dataform.fSheet8bList[3].type2" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[3].type3" />
          </td>
        </tr>
        <tr>
          <td colspan="2">其他场地</td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet8bList[4].num" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[4].acreage" />
          </td>

          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[4].type" />
          </td>
          <td colspan=" 1">
            <input type="text" v-model="dataform.fSheet8bList[4].type2" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.fSheet8bList[4].type3" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">经费投入</td>
          <td colspan="4">当年体育经费投入(万元)</td>
          <td colspan="4">当年足球经费投入(万元)</td>
        </tr>
        <tr>
          <td colspan="2">数量</td>
          <td colspan="2">是否够用</td>
          <td colspan="2">数量</td>
          <td colspan="2">是否够用</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.currentYearSportNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.currentYearSportUserState" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.currentYearFootballNum" />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.currentYearFootballUserState"
            />
          </td>
        </tr>

        <tr>
          <td colspan="1" rowspan="6">足球师资</td>
          <td colspan="4">足球专业的足球教师/教练</td>
          <td colspan="4">足球裁判员</td>
        </tr>
        <tr>
          <td colspan="2">A级以上</td>
          <td colspan="2">
            <input type="text" v-model="dataform.teacherANum" />
          </td>
          <td colspan="2">国家级级以上</td>
          <td colspan="2">
            <input type="text" v-model="dataform.judgeNationNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">B级以上</td>
          <td colspan="2">
            <input type="text" v-model="dataform.teacherBNum" />
          </td>
          <td colspan="2">1级</td>
          <td colspan="2">
            <input type="text" v-model="dataform.judgeLevelOneNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">C级以上</td>
          <td colspan="2">
            <input type="text" v-model="dataform.teachercNum" />
          </td>
          <td colspan="2">2级</td>
          <td colspan="2">
            <input type="text" v-model="dataform.judgeLevelTwoNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">D级以上</td>
          <td colspan="2">
            <input type="text" v-model="dataform.teacherDNum" />
          </td>
          <td colspan="2">3级</td>
          <td colspan="2">
            <input type="text" v-model="dataform.judgeLevelThreeNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">合计</td>
          <td colspan="2">
            <input type="text" v-model="dataform.teacherTotalNum" />
          </td>
          <td colspan="2">合计</td>
          <td colspan="2">
            <input type="text" v-model="dataform.judgeTotalNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">开展足球项目情况(划“√”)</td>
          <td colspan="4">是否青少年足球俱乐部</td>
          <td colspan="4">
            <input type="text" v-model="FootballProject.FootballClub" />
          </td>
        </tr>
        <tr>
          <td colspan="2">是否开展校内联赛</td>
          <td colspan="2">
            <input type="text" v-model="FootballProject.IntramuralLeague" />
          </td>
          <td colspan="2" rowspan="2">是否参加冬夏令营</td>
          <td colspan="1">夏令营</td>
          <td colspan="1">
            <input type="text" v-model="FootballProject.SummerCamp" />
          </td>
        </tr>
        <tr>
          <td colspan="2">是否开展校际联赛</td>
          <td colspan="2">
            <input
              type="text"
              v-model="FootballProject.IntercollegiateLeague"
            />
          </td>
          <td colspan="1">冬令营</td>
          <td colspan="1">
            <input type="text" v-model="FootballProject.WinterCamp" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">开展业余足球训练情况(相应选项后划“√”)</td>
          <td colspan="3">学校与体育部门合办</td>
          <td colspan="3">学校自办</td>
          <td colspan="2">学校与社会合办</td>
        </tr>
        <tr>
          <td colspan="3">
            <input type="text" v-model="AmateurFootball.SportsDepartmen" />
          </td>
          <td colspan="3">
            <input type="text" v-model="AmateurFootball.Runbytheschool" />
          </td>
          <td colspan="2">
            <input type="text" v-model="AmateurFootball.SocialJointOperation" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">足球课程教学</td>
          <td colspan="2">必修课时</td>
          <td colspan="1">
            <input type="text" v-model="dataform.mustCourseTime" />
          </td>
          <td colspan="2" rowspan="3">教材</td>
          <td colspan="2">国家</td>
          <td colspan="1">
            <input type="text" v-model="bookTypeList.nation" />
          </td>
        </tr>
        <tr>
          <td colspan="2">选修课时</td>
          <td colspan="1">
            <input type="text" v-model="dataform.chooseCourseTime" />
          </td>
          <td colspan="2">地方</td>
          <td colspan="1">
            <input type="text" v-model="bookTypeList.place" />
          </td>
        </tr>
        <tr>
          <td colspan="2">每周综合活动时间(小时)</td>
          <td colspan="1">
            <input type="text" v-model="dataform.weekActivityTime" />
          </td>
          <td colspan="2">校本</td>
          <td colspan="1">
            <input type="text" v-model="bookTypeList.CheckedEdition" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">场馆开放情况(相应选项后划“√”)</td>
          <td colspan="3" rowspan="2">是否开放</td>
          <td colspan="3">是</td>
          <td colspan="2"><input type="text" v-model="openStateList.yes" /></td>
        </tr>
        <tr>
          <td colspan="3">否</td>
          <td colspan="2"><input type="text" v-model="openStateList.no" /></td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">开放类型</td>
          <td colspan="3">每天开放</td>
          <td colspan="2">
            <input type="text" v-model="openTypeList.everyday" />
          </td>
        </tr>
        <tr>
          <td colspan="3">节假日开放</td>
          <td colspan="2">
            <input type="text" v-model="openTypeList.holiday" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">已输送的情况(累计)</td>
          <td colspan="1">国家队</td>
          <td colspan="1">省队</td>
          <td colspan="1">市队</td>
          <td colspan="2">高校高水平运动队</td>
          <td colspan="3">其他</td>
        </tr>
        <tr>
          <td colspan="1">
            <input type="text" v-model="dataform.transportNationNum" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.transportProvinceNum" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.transportCityNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.transportHighSchoolNum" />
          </td>
          <td colspan="3">
            <input type="text" v-model="dataform.transportOtherNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="totalActivityRows">
            参加的活动和获得的荣誉与奖励(自2011年起)
          </td>
          <td colspan="1" :rowspan="additionalNationalRows + 1">
            全国性
            <el-tooltip
              content="右键点击输入框可以新增或删除行"
              placement="top"
              effect="light"
            >
              <span style="color: #666; font-size: 12px; cursor: help;">ⓘ</span>
            </el-tooltip>
          </td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template
          v-for="(item, index) in dataform.fSheet8eList.filter(
            item => item.joinActivityTypeId === 1
          )"
        >
          <tr>
            <td colspan="1">
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'national')
                "
              />
            </td>
            <td colspan="6">
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'national')
                "
              />
            </td>
          </tr>
        </template>

        <tr>
          <td colspan="1" :rowspan="additionalProvincialRows + 1">
            省市级
            <el-tooltip
              content="右键点击输入框可以新增或删除行"
              placement="top"
              effect="light"
            >
              <span style="color: #666; font-size: 12px; cursor: help;">ⓘ</span>
            </el-tooltip>
          </td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template
          v-for="(item, index) in dataform.fSheet8eList.filter(
            item => item.joinActivityTypeId === 2
          )"
        >
          <tr>
            <td colspan="1">
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'provincial')
                "
              />
            </td>
            <td colspan="6">
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'provincial')
                "
              />
            </td>
          </tr>
        </template>

        <tr>
          <td colspan="1" :rowspan="additionalOtherRows + 1">
            其他活动
            <el-tooltip
              content="右键点击输入框可以新增或删除行"
              placement="top"
              effect="light"
            >
              <span style="color: #666; font-size: 12px; cursor: help;">ⓘ</span>
            </el-tooltip>
          </td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template
          v-for="(item, index) in dataform.fSheet8eList.filter(
            item => item.joinActivityTypeId === 3
          )"
        >
          <tr>
            <td colspan="1">
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'other')
                "
              />
            </td>
            <td colspan="6">
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'other')
                "
              />
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <!-- 添加右键菜单 -->
    <div v-if="showMenu" :style="menuStyle" class="context-menu">
      <div @click="addRow" class="menu-item">新增一行</div>
      <div @click="deleteRow" class="menu-item">删除这行</div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { insert_update_sheet8 } from "@/api/statistics.js";
export default {
  props: {
    Alldata: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showbutton: true,
      dataform: {
        orgName: "",
        legalPerson: "",
        intAddress: "",
        staticPhone: "",
        schoolType: "",
        footballType: "",
        onSchoolStudentNum: "",
        joinFootballNum: "",
        footballManNum: "",
        footballWomanNum: "",
        getNationYear: "",
        getProvinceYear: "",
        getCityYear: "",
        getCountyYear: "",
        writePeople: "",
        writeTime: "",
        writePhone: "",
        fSheet8bList: [
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "", //1草皮 2塑胶 3其他
            type2: "", //虚假字段前端自己定义为type准备后端不接收
            type3: "" //虚假字段前端自己定义为type准备后端不接收
          },
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "",
            type2: "", //虚假字段前端自己定义为type准备后端不接收
            type3: "" //虚假字段前端自己定义为type准备后端不接收
          },
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "" //1草皮 2塑胶 3其他
          },
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "",
            type2: "", //虚假字段前端自己定义为type准备后端不接收
            type3: "" //虚假字段前端自己定义为type准备后端不接收
          },
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "",
            type2: "", //虚假字段前端自己定义为type准备后端不接收
            type3: "" //虚假字段前端自己定义为type准备后端不接收
          },
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "",
            type2: "", //虚假字段前端自己定义为type准备后端不接收
            type3: "" //虚假字段前端自己定义为type准备后端不接收
          },
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "",
            type2: "", //虚假字段前端自己定义为type准备后端不接收
            type3: "" //虚假字段前端自己定义为type准备后端不接收
          },
          {
            footballName: "",
            num: "",
            acreage: "",
            type: "",
            type2: "", //虚假字段前端自己定义为type准备后端不接收
            type3: "" //虚假字段前端自己定义为type准备后端不接收
          }
        ],
        currentYearSportNum: "",
        currentYearSportUserState: "",
        currentYearFootballNum: "",
        currentYearFootballUserState: "",
        teacherANum: "",
        teacherBNum: "",
        teachercNum: "",
        teacherDNum: "",
        teacherTotalNum: "",
        judgeNationNum: "",
        judgeLevelOneNum: "",
        judgeLevelTwoNum: "",
        judgeLevelThreeNum: "",
        judgeTotalNum: "",
        footballProjectState: "",
        trainingState: "",
        mustCourseTime: "",
        chooseCourseTime: "",
        weekActivityTime: "",
        bookType: "", //1国家 2地方 3校本
        openState: "", //1是 2否
        openType: "", // 1每天开放 2节假日开放
        transportNationNum: "",
        transportProvinceNum: "",
        transportCityNum: "",
        transportHighSchoolNum: "",
        transportOtherNum: "",
        fSheet8eList: [
          {
            joinActivityTypeId: 1, //1全国2省市3其他
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 1, //1全国2省市3其他
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 1, //1全国2省市3其他
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          }
        ]
      },
      //学校类别 1小学 2初中 3高中 4职高 schoolType 多选
      SchoolCategory: {
        PrimarySchool: "",
        JuniorHighSchool: "",
        SeniorHighSchool: "",
        ProfessionalHighSchool: ""
      },
      //开展足球阶段 1小学 2初中 3高中 4职高 footballType 多选
      PlayFootball: {
        PrimarySchool: "",
        JuniorHighSchool: "",
        SeniorHighSchool: "",
        ProfessionalHighSchool: ""
      },

      //开展足球项目 1是否有足球俱乐部 2是否开展校内联赛 3是否参加校际联赛 4夏令营 5冬令营 footballProjectState 多选
      FootballProject: {
        FootballClub: "",
        IntramuralLeague: "",
        IntercollegiateLeague: "",
        SummerCamp: "",
        WinterCamp: ""
      },
      //业余足球 1与体育部门合办 2学校自办 3与社会合办   trainingState
      AmateurFootball: {
        SportsDepartmen: "",
        Runbytheschool: "",
        SocialJointOperation: ""
      },

      //教材类别 //1国家 2地方 3校本   bookType
      bookTypeList: {
        nation: "",
        place: "",
        CheckedEdition: ""
      },

      //场馆开放情况     //1是 2否      openState
      openStateList: {
        yes: "",
        no: ""
      },

      // 场馆开放类型 1每天开放 2节假日开放  openType: 2,
      openTypeList: {
        everyday: "",
        holiday: ""
      },

      showMenu: false,
      menuStyle: {
        left: "0px",
        top: "0px",
        position: "fixed",
        zIndex: 9999
      },
      currentSection: "activity",
      currentRowIndex: -1,
      currentActivityType: ""
    };
  },

  computed: {
    additionalNationalRows() {
      return this.dataform.fSheet8eList.filter(
        item => item.joinActivityTypeId === 1
      ).length;
    },
    additionalProvincialRows() {
      return this.dataform.fSheet8eList.filter(
        item => item.joinActivityTypeId === 2
      ).length;
    },
    additionalOtherRows() {
      return this.dataform.fSheet8eList.filter(
        item => item.joinActivityTypeId === 3
      ).length;
    },
    totalActivityRows() {
      return (
        3 +
        this.additionalNationalRows +
        this.additionalProvincialRows +
        this.additionalOtherRows
      );
    }
  },

  //更新数据
  watch: {
    Alldata(newValue, oldValue) {
      this.dataform = newValue;
      // 场馆开放类型 1每天开放 2节假日开放  openType: 2,
      if (this.dataform.openType == "1") {
        this.openTypeList.everyday = "√";
      } else if (this.dataform.openType == "2") {
        this.openTypeList.holiday = "√";
      }

      //场馆开放情况     //1是 2否      openState
      if (this.dataform.openState == "1") {
        this.openStateList.yes = "√";
      } else if (this.dataform.openState == "2") {
        this.openStateList.no = "√";
      }

      // //教材类别 //1国家 2地方 3校本   bookType

      if (this.dataform.bookType == "1") {
        this.bookTypeList.nation = "√";
      } else if (this.dataform.bookType == "2") {
        this.bookTypeList.place = "√";
      } else if (this.dataform.bookType == "3") {
        this.bookTypeList.CheckedEdition = "√";
      }

      //业余足球 1与体育部门合办 2学校自办 3与社会合办   trainingState
      if (this.dataform.trainingState == "1") {
        this.AmateurFootball.SportsDepartmen = "√";
      } else if (this.dataform.trainingState == "2") {
        this.AmateurFootball.Runbytheschool = "√";
      } else if (this.dataform.trainingState == "3") {
        this.AmateurFootball.SocialJointOperation = "√";
      }

      //开展足球项目 1是否有足球俱乐部 2是否开展校内联赛 3是否参加校际联赛 4夏令营 5冬令营 footballProjectState 多选
      if (this.dataform.footballProjectState) {
        this.dataform.footballProjectState.split(",").forEach(item => {
          if (item == "1") {
            this.FootballProject.FootballClub = "√";
          }
          if (item == "2") {
            this.FootballProject.IntramuralLeague = "√";
          }
          if (item == "3") {
            this.FootballProject.IntercollegiateLeague = "√";
          }
          if (item == "4") {
            this.FootballProject.SummerCamp = "√";
          }
          if (item == "5") {
            this.FootballProject.WinterCamp = "√";
          }
        });
      }

      //开展足球阶段 1小学 2初中 3高中 4职高 footballType 多选
      if (this.dataform.footballType) {
        this.dataform.footballType.split(",").forEach(item => {
          if (item == "1") {
            this.PlayFootball.PrimarySchool = "√";
          }
          if (item == "2") {
            this.PlayFootball.JuniorHighSchool = "√";
          }
          if (item == "3") {
            this.PlayFootball.SeniorHighSchool = "√";
          }
          if (item == "4") {
            this.PlayFootball.ProfessionalHighSchool = "√";
          }
        });
      }

      //学校类别 1小学 2初中 3高中 4职高 schoolType 多选
      if (this.dataform.schoolType) {
        this.dataform.schoolType.split(",").forEach(item => {
          if (item == "1") {
            this.SchoolCategory.PrimarySchool = "√";
          }
          if (item == "2") {
            this.SchoolCategory.JuniorHighSchool = "√";
          }
          if (item == "3") {
            this.SchoolCategory.SeniorHighSchool = "√";
          }
          if (item == "4") {
            this.SchoolCategory.ProfessionalHighSchool = "√";
          }
        });
      }
    }
  },

  methods: {
    showbuut() {
      this.showbutton = false;
    },

    submit() {
      // console.log(this.dataform.fSheet8bList);
      //业余足球 1与体育部门合办 2学校自办 3与社会合办   trainingState
      if (this.AmateurFootball.SportsDepartmen) {
        this.dataform.trainingState = 1;
      } else if (this.AmateurFootball.Runbytheschool) {
        this.dataform.trainingState = 2;
      } else if (this.AmateurFootball.SocialJointOperation) {
        this.dataform.trainingState = 3;
      }

      //开展足球项目 1是否有足球俱乐部 2是否开展校内联赛 3是否参加校际联赛 4夏令营 5冬令营 footballProjectState 多选
      const footballProjectStatelist = [];
      if (this.FootballProject.FootballClub) {
        footballProjectStatelist.push("1");
      }
      if (this.FootballProject.IntramuralLeague) {
        footballProjectStatelist.push("2");
      }
      if (this.FootballProject.IntercollegiateLeague) {
        footballProjectStatelist.push("3");
      }
      if (this.FootballProject.SummerCamp) {
        footballProjectStatelist.push("4");
      }
      if (this.FootballProject.WinterCamp) {
        footballProjectStatelist.push("5");
      }
      this.dataform.footballProjectState = footballProjectStatelist.toString();

      //开展足球阶段 1小学 2初中 3高中 4职高 footballType 多选
      const footballTypelist = [];
      if (this.PlayFootball.PrimarySchool) {
        footballTypelist.push("1");
      }
      if (this.PlayFootball.JuniorHighSchool) {
        footballTypelist.push("2");
      }
      if (this.PlayFootball.SeniorHighSchool) {
        footballTypelist.push("3");
      }
      if (this.PlayFootball.ProfessionalHighSchool) {
        footballTypelist.push("4");
      }
      this.dataform.footballType = footballTypelist.toString();

      //学校类别 1小学 2初中 3高中 4职高 schoolType 多选
      const schoolTypelist = [];
      if (this.SchoolCategory.PrimarySchool) {
        schoolTypelist.push("1");
      }
      if (this.SchoolCategory.JuniorHighSchool) {
        schoolTypelist.push("2");
      }
      if (this.SchoolCategory.SeniorHighSchool) {
        schoolTypelist.push("3");
      }
      if (this.SchoolCategory.ProfessionalHighSchool) {
        schoolTypelist.push("4");
      }

      this.dataform.schoolType = schoolTypelist.toString();

      // //教材类别 //1国家 2地方 3校本   bookType

      if (this.bookTypeList.nation) {
        this.dataform.bookType = 1;
      } else if (this.bookTypeList.place) {
        this.dataform.bookType = 2;
      } else if (this.bookTypeList.CheckedEdition) {
        this.dataform.bookType = 3;
      }

      //场馆开放情况     //1是 2否      openState
      if (this.openStateList.yes) {
        this.dataform.openState = 1;
      } else if (this.openStateList.no) {
        this.dataform.openState = 2;
      }

      // 场馆开放类型 1每天开放 2节假日开放  openType: 2,
      if (this.openTypeList.everyday) {
        this.dataform.openType = 1;
      } else if (this.openTypeList.holiday) {
        this.dataform.openType = 2;
      }

      this.dataform.fSheet8bList.forEach(item => {
        if (item.type) {
          item.type = 1;
        } else if (item.type2) {
          item.type = 2;
        } else if (item.type3) {
          item.type = 3;
        }
      });

      // console.log(qs.stringify(this.dataform));
      insert_update_sheet8(this.dataform).then(res => {
        this.$message.success("填报成功");
      });
    },

    hideContextMenu() {
      this.showMenu = false;
    },

    showActivityContextMenu(event, index, type) {
      console.log("Right click triggered", { index, type }); // 调试日志
      event.preventDefault();
      event.stopPropagation();

      this.showMenu = true;
      this.currentSection = "activity";
      this.currentActivityType = type;
      this.currentRowIndex = index;

      // 计算菜单位置
      const x = event.clientX;
      const y = event.clientY;

      this.menuStyle = {
        left: `${x}px`,
        top: `${y}px`,
        position: "fixed",
        zIndex: 9999
      };

      console.log("Menu should be visible", this.showMenu); // 调试日志
    },

    addRow() {
      console.log("Adding row", this.currentActivityType); // 调试日志
      const newActivity = {
        joinActivityTypeId:
          this.currentActivityType === "national"
            ? 1
            : this.currentActivityType === "provincial"
            ? 2
            : 3,
        joinTime: "",
        result: ""
      };

      this.dataform.fSheet8eList.push(newActivity);
      this.hideContextMenu();
    },

    deleteRow() {
      console.log("Deleting row", this.currentActivityType); // 调试日志
      const typeId =
        this.currentActivityType === "national"
          ? 1
          : this.currentActivityType === "provincial"
          ? 2
          : 3;

      const activities = this.dataform.fSheet8eList.filter(
        item => item.joinActivityTypeId === typeId
      );

      if (activities.length <= 1) {
        Message.warning("至少保留一行");
        return;
      }

      const deleteIndex = this.dataform.fSheet8eList.indexOf(
        activities[this.currentRowIndex]
      );
      if (deleteIndex !== -1) {
        this.dataform.fSheet8eList.splice(deleteIndex, 1);
      }

      this.hideContextMenu();
    }
  },

  mounted() {
    // 添加点击事件监听器来关闭菜单
    document.addEventListener("click", e => {
      if (!e.target.closest(".context-menu")) {
        this.hideContextMenu();
      }
    });
  },

  beforeDestroy() {
    document.removeEventListener("click", this.hideContextMenu);
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  /* //合并为一个单一的边框 */
  border-color: #a2a7ab;
  /* //边框颜色按实际自定义即可 */
  margin-bottom: 10px;
}

thead tr th {
  background-color: #f8f8f9;
  /* //设置表格标题背景色 */
  padding: 3px;
  text-align: center;
}

tbody tr td {
  padding: 3px;
  text-align: center;
  height: 34px;
  /* //设置单元格最小高度 */
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 0;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
}
</style>
